<template>
  <el-form-item :rules="item.rule" :label="item.label" :prop="item.prop">
    <el-input
      type="textarea"
      :class="{ 'neu-icon': item.showIcon }"
      v-model="formData[item.prop]"
      @change="item.change && item.change(formData[item.prop])"
      :disabled="item.disabled"
      :rows="item.row"
      :maxlength="item.max"
      :minlength="item.min"
      :placeholder="
        item.placeholder === undefined ? '请输入' : item.placeholder
      "
      :show-word-limit="
        item.showWordLimit === undefined ? false : item.showWordLimit
      "
      :readonly="item.readonly === undefined ? false : item.readonly"
    />
    <span
      v-if="item.showIcon"
      @click="item.iconChange && item.iconChange(formData[item.prop])"
      class="iconPos"
      ><i class="iconfont iconicon-info-line"></i
    ></span>
    <div class="hint" v-if="item.tooltip">
      <el-tooltip
        effect="dark"
        placement="top-start"
        class="iconPos"
        :popper-class="popperClass"
      >
        <div slot="content">
          <span v-html="item.hint"></span>
        </div>
        <i class="iconfont iconicon-info-line"></i>
      </el-tooltip>
    </div>
  </el-form-item>
</template>

<script>
export default {
  name: "textareaCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    popperClass() {
      return this.item.popperClass ? this.item.popperClass : "max-w-500";
    }
  },
  data() {
    return {};
  }
};
</script>

<style scoped lang="scss">
.neu-icon {
  width: 100%;
}
.iconPos .iconfont {
  color: #1b65b9;
}
.iconPar ::v-deep .el-form-item__content {
  position: relative;
}
.iconPos {
  position: absolute;
  right: -22px;
  top: 0;
}
</style>
